// // 1. 封装查询函数
// function searchWeather (city) {
//   hmAxios({
//     url: 'http://hmajax.itheima.net/api/weather',
//     params: {
//       city
//     }
//   }).then(res => {
//     console.log(res, 9);
//     // 3. 渲染天气
//     const wData = res.data
//     document.querySelector('.area').innerText = wData.area
//     /* 4、渲染日期 */
//     const dateStr = `<span class="date">${wData.date}</span>
//         <span class="calendar">农历&nbsp;
//           <span class="dateLunar">${wData.dateLunar}</span>
//         </span>`
//     document.querySelector('.title').innerHTML = dateStr

//     /* 当前天气 */
//     const curStr = `
//       <div div class="tem-box" >
//         <span class="temp">
//           <span class="temperature">${wData.temperature}</span>
//           <span>°</span>
//         </span>
//       </div >
//       <div class="climate-box">
//         <div class="air">
//           <span class="psPm25">${wData.psPm25}</span>
//           <span class="psPm25Level">${wData.psPm25Level}</span>
//         </div>
//         <ul class="weather-list">
//           <li>
//             <img src="./imgs/小雨-line.png" class="weatherImg" alt="">
//               <span class="weather">${wData.weather}</span>
//           </li>
//           <li class="windDirection">${wData.windDirection}</li>
//           <li class="windPower">${wData.windPower}</li>
//         </ul>
//       </div>
//       `
//     document.querySelector('.weather-box').innerHTML = curStr


//     // 今天的天气
//     const { todayWeather } = wData
//     const tStr = `
//     <div class="range-box">
//         <span>今天：</span>
//         <span class="range">
//           <span class="weather">${todayWeather.weather}</span>
//           <span class="temNight">${todayWeather.weather}</span>
//           <span>-</span>
//           <span class="temDay">${todayWeather.temDay}</span>
//           <span>℃</span>
//         </span>
//       </div>
//       <ul class="sun-list">
//         <li>
//           <span>紫外线</span>
//           <span class="ultraviolet">${todayWeather.temDay}</span>
//         </li>
//         <li>
//           <span>湿度</span>
//           <span class="humidity">${todayWeather.humidity}</span>%
//         </li>
//         <li>
//           <span>日出</span>
//           <span class="sunriseTime">${todayWeather.sunriseTime}</span>
//         </li>
//         <li>
//           <span>日落</span>
//           <span class="sunsetTime">${todayWeather.sunsetTime}</span>
//         </li>
//       </ul>`
//     document.querySelector('.today-weather').innerHTML = tStr

//     // 7日天气预报
//     const weekStr = wData.dayForecast.map(v => {
//       return `
//         <li class="item">
//           <div class="date-box">
//             <span class="dateFormat">${v.dateFormat}</span>
//             <span class="date">${v.date}</span>
//           </div>
//           <img src="${v.weatherImg}" alt="" class="weatherImg">
//           <span class="weather">${v.weather}</span>
//           <div class="temp">
//             <span class="temNight">${v.temNight}</span>-
//             <span class="temDay">${v.temDay}</span>
//             <span>℃</span>
//           </div>
//           <div class="wind">
//             <span class="windDirection">${v.windDirection}</span>
//             <span class="windPower">${v.windPower}</span>
//           </div>
//         </li>
//       `
//     }).join('')
//     // console.log(weekStr)
//     document.querySelector('.week-wrap').innerHTML = weekStr
//   })
// }
// // 2. 查询北京天气
// searchWeather('110100')




// /* 搜索城市 */
// const func = _.debounce(function () {
//   console.log(this.value, 998);
//   hmAxios({
//     url: 'http://hmajax.itheima.net/api/weather/city',
//     params: {
//       city: this.value
//     }
//   }).then(res => {
//     console.log(res, 9999);
//     const str = res.data.map(v => {
//       return `<li class="city-item" data-code="${v.code}">${v.name}</li>`
//     }).join('')
//     document.querySelector('.search-list').innerHTML = str
//   })
// }, 1000)
// // 1. 注册input事件
// document.querySelector('.search-city').addEventListener('input', func)


// /**
//  * 三. 点击查询城市天气
//  *  1. 绑定点击事件
//  *  2. 获取城市编码
//  *  3. 查询城市天气
//  * */
// // 1. 绑定点击事件
// document.querySelector('.search-list').addEventListener('click', (e) => {
//   if (e.target.classList.contains('city-item')) {
//     // 2. 获取城市编码
//     const { code } = e.target.dataset
//     // 3. 查询城市天气
//     searchWeather(code)
//   }
// })

/* 获取城市天气 */
function searchWeather (city) {
  /* 获取城市的天气预报 */
  myAxios({
    url: 'http://hmajax.itheima.net/api/weather',
    params: {
      city
    }
  }).then(res => {
    console.log(res, 111);
    /* 渲染数据步骤分析
    1、当前时间
    2、城市名
    3、当前天气
    4、今天的天气
    5、一周
    */
    //  1、当前时间
    const wData = res.data
    // <div class="title">
    //     <span class="date">xxxx-xx-xx</span>
    //     <span class="calendar">农历&nbsp;
    //       <span class="dateLunar">十月初四</span>
    //     </span>
    //   </div>
    const str = `
      <span class="date" > ${wData.date}</ >
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${wData.dateShort}</span>
        </span>
    `
    document.querySelector('.title').innerHTML = str
    //  2、城市名
    // <span class="area">城市名</span>
    document.querySelector('.area').innerHTML = wData.area
    //  3、当前天气
    // <div class="weather-box">
    //   <div class="tem-box">
    //     <span class="temp">
    //       <span class="temperature">12</span>
    //       <span>°</span>
    //     </span>
    //   </div>
    //   <div class="climate-box">
    //     <div class="air">
    //       <span class="psPm25">55</span>
    //       <span class="psPm25Level">良</span>
    //     </div>
    //     <ul class="weather-list">
    //       <li>
    //         <img src="./imgs/小雨-line.png" class="weatherImg" alt="">
    //         <span class="weather">多云</span>
    //       </li>
    //       <li class="windDirection">东南风</li>
    //       <li class="windPower">2级</li>
    //     </ul>
    //   </div>
    // </div>
    const str2 = `
      <div class="tem-box">
        <span class="temp">
          <span class="temperature">${wData.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${wData.psPm25}</span>
          <span class="psPm25Level">${wData.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${wData.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${wData.weather}</span>
          </li>
          <li class="windDirection">${wData.windDirection}</li>
          <li class="windPower">${wData.windPower}</li>
        </ul>
      </div>
    `
    document.querySelector('.weather-box').innerHTML = str2

    /* 今天天气
    <div class="today-weather">
      <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">晴</span>
          <span class="temNight">9</span>
          <span>-</span>
          <span class="temDay">14</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">强</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">53</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">06:38</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">17:18</span>
        </li>
      </ul>
    </div>

    */
    const todayWeather = res.data.todayWeather
    const str4 = `
    <div class="range-box">
      <span>今天：</span>
      <span class="range">
        <span class="weather">${todayWeather.weather}</span>
        <span class="temNight">${todayWeather.temNight}</span>
        <span>-</span>
        <span class="temDay">${todayWeather.temDay}</span>
        <span>℃</span>
      </span>
    </div>
    <ul class="sun-list">
      <li>
        <span>紫外线</span>
        <span class="ultraviolet">${todayWeather.ultraviolet}</span>
      </li>
      <li>
        <span>湿度</span>
        <span class="humidity">${todayWeather.humidity}</span>%
      </li>
      <li>
        <span>日出</span>
        <span class="sunriseTime">${todayWeather.sunriseTime}</span>
      </li>
      <li>
        <span>日落</span>
        <span class="sunsetTime">${todayWeather.sunsetTime}</span>
      </li>
    </ul>
   `
    document.querySelector('.today-weather').innerHTML = str4

    /* 一周天气
     <li class="item">
          <div class="date-box">
            <span class="dateFormat">今天</span>
            <span class="date">10月28日</span>
          </div>
          <img src="./imgs/多云.png" alt="" class="weatherImg">
          <span class="weather">多云</span>
          <div class="temp">
            <span class="temNight">12</span>-
            <span class="temDay">12</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">东南风</span>
            <span class="windPower">&lt;3级</span>
          </div>
        </li>
    */
    const dayForecast = res.data.dayForecast
    const str5 = dayForecast.map(d => {
      return `
      <li class="item">
          <div class="date-box">
            <span class="dateFormat">${d.dateFormat}</span>
            <span class="date">${d.date}</span>
          </div>
          <img src="${d.weatherImg}" class="weatherImg">
          <span class="weather">${d.weather}</span>
          <div class="temp">
            <span class="temNight">${d.temNight}</span>-
            <span class="temDay">${d.temDay}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${d.windDirection}</span>
            <span class="windPower">${d.windPower}</span>
          </div>
        </li>
      `
    })
    document.querySelector('.week-wrap').innerHTML = str5
  })
}
searchWeather('110100')



/* 实现防抖 */
const fn = _.debounce((e) => {
  // console.log(e.target.value, 11111);
  /* 发送请求获取数据 */
  // http://hmajax.itheima.net/api/weather/city
  myAxios({
    url: 'http://hmajax.itheima.net/api/weather/city',
    params: {
      city: e.target.value
    }
  }).then(res => {
    console.log(res, 22);
    const city = res.data.map(k => {
      return `<li class="city-item" data-code='${k.code}'>${k.name}</li>`
    })
    document.querySelector('.search-list').innerHTML = city.join(' ')
  })
}, 1000)
document.querySelector('.search-city').addEventListener('input', fn)

document.querySelector('.search-list').addEventListener('click', (e) => {
  // e.target.classList.add('show')
  console.log(e.target, 11222);
  // 判断点击的是不是li
  if (e.target.classList.contains('city-item')) {
    searchWeather(e.target.dataset.code)
    /* 给表单赋值 */
    document.querySelector('.search-city').value = e.target.innerText
  }
})

